<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p4_制作网页固定广告条</title>
    <style>
        .top {
            height: 120px;
            background-color: #5AA4AE;
            position: fixed;
            width: 100vw;
            font-size: 30px;
            color: #fff;
            top: 0;
        }
        .main {
            margin-top: 130px;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #FFF799;
            left: 20px;
        }
        .right {
            background-color: #F35336;
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem commodi consequatur corporis delectus
            dolore, dolores inventore labore laudantium minima, molestias nesciunt perspiciatis, quaerat quia rem
            sapiente sed vero. Doloremque, tempore.
        </div>
        <div>Architecto, dicta et, fugit impedit iusto nesciunt pariatur quasi quidem quisquam tenetur, unde veritatis
            voluptate voluptatem? Ducimus expedita maiores maxime, molestias non odit! Accusamus amet aut est, eveniet
            harum magni.
        </div>
        <div>Alias animi aperiam blanditiis consequatur cumque ducimus eius esse facere harum, id iste magni molestiae
            non numquam officiis pariatur placeat provident quibusdam quidem quod sequi sit vitae. Accusantium, debitis,
            praesentium?
        </div>
        <div>Ad architecto assumenda at cum cupiditate dolor dolorum ducimus fugit in, iusto magni numquam rerum saepe
            sed, sint, soluta tenetur totam velit voluptate voluptates. Ad corporis cumque doloribus eos rem?
        </div>
        <div>Accusamus architecto assumenda, commodi deleniti dignissimos enim, et exercitationem itaque labore laborum
            maxime minus molestias, natus nostrum odio officiis omnis optio quaerat quasi quibusdam repellat tenetur
            veniam voluptatem voluptates voluptatum!
        </div>
        <div>Cum deserunt dicta distinctio dolore, doloremque, ea earum enim, eos explicabo fuga laboriosam natus
            necessitatibus neque nobis non officiis pariatur placeat porro possimus provident rem repellat repudiandae
            suscipit veniam voluptatibus!
        </div>
        <div>Accusantium architecto assumenda corporis, deserunt earum eos excepturi explicabo facere in ipsa magni odit
            quaerat repellat reprehenderit sapiente vero voluptatibus. Consectetur dolor ea eius necessitatibus odit
            quas quo sunt totam.
        </div>
        <div>Ab consectetur deserunt dicta distinctio, eaque eos excepturi, facere facilis in iure minus, necessitatibus
            omnis quasi reiciendis repellat veritatis voluptatibus? Amet corporis debitis excepturi in laboriosam
            molestiae possimus quia veritatis?
        </div>
        <div>Nobis perspiciatis reiciendis sapiente sit soluta veniam. Cumque, doloremque dolorum earum est ipsum iste
            iusto labore minus modi natus perspiciatis, placeat possimus quae quam quas quasi recusandae, sapiente?
            Perferendis, sit?
        </div>
        <div>Ab adipisci aperiam atque dignissimos distinctio earum expedita hic id, ipsam neque obcaecati praesentium
            quod ratione repudiandae voluptates. Corporis, culpa debitis delectus enim illum natus quibusdam quos unde
            veniam voluptatum.
        </div>
        <div>Asperiores earum enim eos esse et eum exercitationem id itaque iusto laborum minima minus molestias
            mollitia necessitatibus odit officiis quas quasi tempora tempore, veritatis? Commodi id iure non sed
            voluptas!
        </div>
        <div>Adipisci architecto at aut consequatur earum, error est expedita hic illo ipsum iste laborum magnam magni
            maiores mollitia nihil officia omnis pariatur perspiciatis, placeat possimus qui quia quis saepe, totam.
        </div>
        <div>Adipisci aliquid corporis, eligendi eos esse est harum iste iure modi, nulla quas rem repellendus, soluta
            velit voluptatem. Assumenda, consectetur esse expedita fugit magni nostrum quis similique sint vel
            voluptate.
        </div>
        <div>Ad aliquam, consequatur cumque dolor dolorum fuga fugit harum itaque iusto labore molestias, necessitatibus
            odio optio porro provident quibusdam saepe ullam veniam. Distinctio eos laudantium, numquam quidem quo velit
            voluptatem?
        </div>
        <div>Ab accusantium, ad aperiam, asperiores autem consectetur corporis delectus dicta doloremque dolorum eaque
            eius enim eos esse harum id incidunt labore magnam pariatur perspiciatis quam quis quos saepe tempora
            voluptatibus?
        </div>
        <div>Aspernatur blanditiis deleniti, facilis incidunt maiores molestiae nam necessitatibus neque obcaecati
            officiis perferendis, quas voluptatibus. Accusantium atque aut facilis incidunt iste, nobis obcaecati
            pariatur quis, quos sed ut, vel! Quam.
        </div>
        <div>A aliquam assumenda consectetur consequatur cupiditate debitis dignissimos error esse fugit iure magni odio
            officia placeat quaerat quia quibusdam quidem, quisquam reiciendis sint sunt suscipit tempora ullam ut
            veniam voluptatibus?
        </div>
        <div>Ab ad, adipisci asperiores consectetur consequatur corporis cum debitis doloribus enim eveniet, expedita
            hic impedit itaque iure minima modi molestiae nesciunt nisi pariatur provident quasi quidem sequi unde vitae
            voluptates!
        </div>
        <div>Adipisci commodi delectus, dolorum eaque, earum ex illum iste modi perferendis perspiciatis possimus
            provident, quam quasi quisquam similique sit soluta voluptatibus voluptatum. Illo nihil odio ratione tempora
            tempore veniam vitae?
        </div>
        <div>Adipisci alias amet animi autem culpa deserunt dolor dolores ea est eum exercitationem expedita fugiat
            inventore ipsam iure laborum minima molestias, natus officiis placeat porro quae quaerat quos, repellendus
            ut?
        </div>
        <div>Adipisci atque autem dolore excepturi fugiat in, non nostrum odio quasi qui soluta temporibus totam
            voluptatum. Ipsa ipsum molestiae perspiciatis possimus quasi quia quibusdam sed suscipit, tempora temporibus
            veniam vero.
        </div>
        <div>Aliquid architecto aspernatur assumenda beatae consequuntur cumque eligendi eum eveniet ex excepturi fugit
            hic id, in inventore ipsa labore odio omnis praesentium quae quas saepe sint soluta tempora vel velit.
        </div>
        <div>Alias aperiam dolorum error est exercitationem magni natus neque nobis unde voluptatum! Adipisci debitis
            dolor expedita hic iure natus odio officiis, quibusdam rerum similique. Aperiam dolorum eos minima
            praesentium rem!
        </div>
        <div>Aliquid, aspernatur corporis cumque deserunt eaque eos ipsa ipsam quasi sed. Corporis eligendi incidunt,
            modi officiis porro quas quis reiciendis? Debitis dolor ex id officia praesentium recusandae repellendus sed
            voluptates.
        </div>
        <div>Ad aliquid, animi asperiores, assumenda corporis deleniti dicta distinctio doloribus dolorum ducimus
            eligendi eveniet excepturi fuga illo iure minus numquam odio omnis perspiciatis quaerat quibusdam quos rerum
            tempora voluptatem voluptatum.
        </div>
        <div>Amet aut dignissimos doloribus esse in labore nam nesciunt nulla obcaecati odit quis, quod quos saepe
            tenetur velit voluptas voluptate. Aspernatur at doloremque ducimus exercitationem magnam, nihil rerum
            sapiente tempore.
        </div>
        <div>Accusamus amet, architecto cumque deleniti dignissimos doloribus ducimus enim eos error expedita facere
            ipsum iste labore laborum obcaecati odio omnis, perferendis porro quas quis saepe sint soluta sunt vitae
            voluptas!
        </div>
        <div>Assumenda dignissimos eius libero maxime molestias. Ab alias aperiam commodi cupiditate dignissimos dolor
            doloremque ducimus explicabo, hic labore nisi nobis, officiis pariatur perferendis provident quae saepe
            sapiente sint sit vel!
        </div>
        <div>Autem dignissimos doloribus, explicabo fugiat quidem ratione voluptatum? Accusamus consequatur, id iure
            nulla odio provident, quaerat quas quo rem sequi, vel vitae. Amet ea eum itaque nihil nisi, tempora
            temporibus!
        </div>
        <div>Blanditiis corporis dolorum expedita iste labore maiores maxime nam quod sit soluta. Amet consectetur
            consequatur deserunt iure ullam. Eligendi est exercitationem ipsa modi placeat? Atque distinctio eligendi
            eos quod sequi.
        </div>
        <div>Accusamus aut delectus deserunt fuga harum natus optio sapiente sunt velit! Dolore doloribus est facere
            officia quibusdam reiciendis sed! Cupiditate delectus deleniti dolor exercitationem fugiat impedit nesciunt
            saepe, sed voluptatum!
        </div>
        <div>Consequuntur corporis dolorum explicabo in libero maxime minima nulla optio quam quisquam! Ab adipisci enim
            exercitationem libero nesciunt quia totam ullam voluptatibus. Cum dolores minus nulla quae quasi, ratione
            rem!
        </div>
        <div>A atque aut blanditiis consequatur deleniti distinctio dolores, doloribus ea earum enim fugiat illum itaque
            minus molestiae nostrum obcaecati optio rem sint sit tempore totam unde veniam vero voluptas voluptatibus.
        </div>
        <div>Culpa debitis earum eveniet expedita officia similique sint soluta, tenetur. Blanditiis consequuntur ea
            eligendi facilis fugit itaque laudantium magni quam, quia vero. A, ducimus recusandae. Aperiam natus
            praesentium quos reiciendis.
        </div>
        <div>Ad architecto autem cum cupiditate deleniti dignissimos eius error eveniet fugit illum in incidunt, ipsam
            laborum maiores, modi nesciunt non praesentium quasi, quibusdam repellat repudiandae sequi vero vitae
            voluptatem voluptatum?
        </div>
        <div>Ad alias beatae cupiditate ea enim impedit in incidunt iure libero magnam minus molestiae pariatur
            praesentium quibusdam quidem quis quod rem, sequi suscipit totam unde veniam vitae voluptatum! Enim, vel!
        </div>
        <div>Accusantium, amet autem cumque ipsam labore quis saepe? Ab beatae eligendi enim illo laudantium!
            Asperiores, debitis dicta dolorum impedit ipsum itaque laborum libero molestiae neque quos repellat sit sunt
            tempora!
        </div>
        <div>Aut cumque deleniti est itaque necessitatibus praesentium, rerum sit. Facere quo, tenetur. Culpa ea
            explicabo ipsam magnam molestias, nulla rem saepe ut. Alias distinctio nemo omnis sequi sit? Cum, est!
        </div>
        <div>Ab adipisci blanditiis distinctio dolor eligendi error est eum excepturi facilis harum, id ipsam maxime
            nesciunt nisi nobis quas quasi quidem ratione recusandae repellat rerum sit unde velit veniam voluptatum!
        </div>
        <div>Cumque doloremque est illo iure officia possimus quis suscipit vel. At blanditiis deserunt dicta esse eum,
            hic ipsum laudantium necessitatibus nobis, officiis optio pariatur quod repellendus reprehenderit,
            repudiandae tenetur totam.
        </div>
        <div>Doloribus exercitationem explicabo impedit, iure laudantium quaerat quibusdam quo suscipit. Aliquid at
            ipsam laborum odio omnis reprehenderit sed? At atque ducimus enim excepturi facilis, ipsum iste praesentium
            qui repudiandae suscipit.
        </div>
        <div>Ab aliquam amet aperiam assumenda cum cumque deleniti deserunt dolor ducimus enim et excepturi in iure
            iusto libero necessitatibus nemo, nisi nulla, optio porro possimus quaerat sapiente, sit soluta vitae.
        </div>
        <div>Animi, at delectus deserunt dignissimos ipsa molestias obcaecati? Deleniti eius excepturi, fugit obcaecati
            quasi reiciendis voluptatibus. Cum facere id, iusto laborum minima nemo nostrum pariatur, quasi, quo sed
            unde ut.
        </div>
        <div>Adipisci consequuntur deleniti fuga harum ipsam ipsum, labore laborum maiores optio perspiciatis quia
            recusandae similique voluptatibus? Ab dolorum excepturi fugiat optio voluptates. Dicta enim nobis, quo quod
            repudiandae sit vero.
        </div>
        <div>Aspernatur autem culpa cumque dolore exercitationem natus, officia, placeat, quasi tempore voluptatem
            voluptates voluptatibus. Aperiam deserunt dolor explicabo id iure iusto laborum libero maiores nam nisi
            repellat, sint tempora ullam.
        </div>
        <div>A accusantium ad asperiores, aspernatur, aut autem, commodi debitis dolor dolore dolorum error explicabo
            fuga fugiat illum in itaque iusto laboriosam molestias numquam obcaecati quibusdam repellat reprehenderit
            sapiente veritatis voluptas?
        </div>
        <div>Dolor exercitationem mollitia nulla obcaecati rem reprehenderit sapiente, tenetur. Ad exercitationem magni
            nemo officia quia quidem repellat saepe soluta velit voluptates. Accusamus eveniet nulla sequi voluptatibus!
            Facere id mollitia numquam?
        </div>
        <div>Aliquam aut dolor, eos hic magni nobis non perspiciatis quasi veniam. Id, molestiae, rem? At, consequatur,
            deserunt dignissimos facilis fugit incidunt ipsa ipsam nesciunt, praesentium quis repudiandae rerum sint
            voluptatibus.
        </div>
        <div>Adipisci architecto, cum cumque eum expedita id laboriosam maiores minus, modi neque, nihil nostrum
            officiis possimus provident quia quos sunt totam? Asperiores dicta dolorum excepturi illo nemo, quis
            repudiandae velit.
        </div>
        <div>Autem consequuntur culpa dolorem doloribus eaque eligendi facilis fugiat incidunt ipsam ipsum iusto labore
            minima nemo nesciunt numquam odio officia porro, quasi quod rerum sunt tempora temporibus tenetur veniam
            vitae!
        </div>
        <div>Ab aspernatur atque dicta esse illo nisi quasi repellat sapiente similique totam. Doloremque, minus non! Ab
            atque dicta eius facere fuga fugiat impedit laborum magni minus quas qui, similique ut?
        </div>
        <div>Aliquid aperiam aut corporis distinctio eligendi laboriosam maxime, molestias quasi qui quidem sequi
            suscipit! A ab aliquam, consectetur consequuntur, cum, dolore eius error expedita impedit ipsum perspiciatis
            quibusdam quos sit.
        </div>
        <div>Ad aperiam asperiores, aut corporis dignissimos dolor dolorem doloribus ea eius eligendi error esse id
            ipsum iste laborum minima molestias neque non perferendis quaerat quam quasi sed sunt ullam voluptatum?
        </div>
        <div>Alias aut consequuntur corporis, dolor ducimus earum inventore magnam modi natus quae quas repudiandae
            sequi sint sunt suscipit temporibus veniam, veritatis, voluptatibus! Aliquid corporis, deleniti earum
            explicabo iusto nihil ratione.
        </div>
        <div>Asperiores aspernatur consectetur cumque dicta illum, molestias officia temporibus. A asperiores corporis
            culpa eligendi odio pariatur quis sunt voluptatibus. Deserunt dolorum eveniet fuga magnam, mollitia nobis
            officiis sequi totam voluptatibus?
        </div>
        <div>Asperiores, consectetur dolores est fugit impedit perferendis qui quo reiciendis! Alias aliquid, culpa
            dolorem doloremque eos et exercitationem expedita maxime neque, odio quasi repudiandae, sequi temporibus
            tenetur vero voluptas voluptatum.
        </div>
        <div>Accusamus asperiores aut blanditiis consequatur corporis deserunt dignissimos earum eveniet excepturi
            exercitationem harum hic illum ipsa ipsam iusto modi, nisi odio officiis omnis placeat praesentium quas
            ratione reiciendis tenetur voluptas.
        </div>
        <div>Alias assumenda dignissimos ducimus, eos est nam nulla quibusdam quidem ullam veniam! Adipisci, corporis
            dolor dolore dolorem eos iste laudantium minus molestias quaerat quibusdam repellat sed tempora ut vitae
            voluptatem!
        </div>
        <div>Ad aperiam atque autem est fuga iste magni minus, nihil perferendis reiciendis rem sequi? Consequuntur
            doloremque error fuga molestiae, neque nostrum nulla, obcaecati odit omnis perferendis quas ut vel voluptas!
        </div>
        <div>Ad aspernatur cumque dignissimos dolor, ex excepturi hic ipsa minus molestias non obcaecati omnis totam vel
            velit vitae voluptas, voluptatibus. Distinctio harum id impedit modi nihil nulla officia vel voluptate.
        </div>
    </div>
</body>
</html>